<template>
  <view class="tab-bar" :class="{ dark: isDarkMode }">
    <view
      v-for="(item, index) in list"
      :key="index"
      class="tab-bar-item"
      @tap="switchTab(item.pagePath)"
    >
      <i
        :class="`iconfont icon-${item.iconPath}`"
        :style="{
          color: selected === index ? themeColor : normalColor,
          fontSize: '40rpx',
        }"
      />
      <view
        class="tab-bar-text"
        :style="{ color: selected === index ? themeColor : normalColor }"
      >
        {{ item.text }}
      </view>
    </view>
  </view>
</template>

<script>
import { useThemeStore } from "@/stores/themeStore";
import Taro from "@tarojs/taro";
export default {
  name: "CustomTabBar",
  data() {
    return {
      selected: 0,
      normalColor: "#666",
      list: [
        {
          pagePath: "/pages/index/index",
          text: "首页",
          iconPath: "shouye",
          selectedIconPath: "shouye",
        },
        {
          pagePath: "/pages/setting/setting",
          text: "设置",
          iconPath: "a-shezhi-shucaidanshezhi-copy",
          selectedIconPath: "a-shezhi-shucaidanshezhi-copy",
        },
      ],
    };
  },
  computed: {
    themeColor() {
      const themeStore = useThemeStore();
      return themeStore.currentTheme.primaryColor;
    },
    isDarkMode() {
      const themeStore = useThemeStore();
      return themeStore.themeMode === "dark";
    },
  },
  mounted() {
    // 获取当前页面路径，设置选中状态
    const pages = Taro.getCurrentPages();
    const currentPage = pages[pages.length - 1];
    const path = "/" + currentPage.route;
    const index = this.list.findIndex((item) => item.pagePath === path);
    if (index !== -1) {
      this.selected = index;
    }
  },
  methods: {
    switchTab(path) {
      Taro.switchTab({
        url: path,
      });
    },
  },
};
</script>

<style lang="scss">
@import "../assets/font/iconfont.css";
.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100px;
  background: #fff;
  display: flex;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.04);
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 9999;

  &.dark {
    background: #2c2c2e;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.2);

    .tab-bar-text {
      color: #8e8e93;
    }
  }

  .tab-bar-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 8px 0;
  }

  .tab-bar-text {
    font-size: 20px;
    margin-top: 8px;
    color: #666;
  }
}
</style>
